<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="1.css">
    <title>首页</title>
</head>

<body>
    <div class="navbar navbar-inverse " id="a">

        <ul class="nav navbar-nav">

            <li>
                <a href="#">联系电话：+00 11 22 33</a>
            </li>
            <li>
                <a href="#">邮箱地址：11@email.com</a>
            </li>
            <li type="button" class="gyu" style="color: #fff;margin-top: 27px;">点击关于</li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <input type="text" placeholder="点击搜索">
                <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
            </li>
        </ul>
    </div>
    <div class="container" id='nav'>

        <div class=" col-md-1 ">

            <a href=""><span class="active">首页</span> </a>
            </li>
        </div>
        <div class=" col-md-1 ">
            <a href="shop.html">商店</a>

        </div>
        <div class=" col-md-1 ">
            <a href="playgame.html">玩游戏</a>
        </div>
        <div class=" col-md-6 ">

            <center style="font-size: 38px;border: 3px solid #6e4;color: #abcdef;">游戏菌</center>

        </div>
        <div class=" col-md-1 ">
            <a href="new.html">新闻</a>
        </div>
        <div class=" col-md-1 ">
            <a href="login.html">登录</a>
        </div>
        <div class=" col-md-1 ">
            <a href="register.html">注册</a>
        </div>
    </div>

    <div id="ad-carousel" class="carousel slide" data-ride="carousel" style="padding-top: 50px;">
        <ol class="carousel-indicators">
            <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#ad-carousel" data-slide-to="1" class=""></li>
            <li data-target="#ad-carousel" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="banner1.jpg" alt="1 slide">

                <div class="">
                    <div class="carousel-caption">
                        <h1>冰封雪地</h1>

                        <p>一个精通冰魔法的法师打怪升级的故事</p>

                        <p><a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">点我下载</a></p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="banner2.jpg" alt="2 slide">
                <div class="">
                    <div class="carousel-caption">
                        <h1>骷髅王</h1>
                        <p>主角是一个不死不灭的亡灵，只有复仇才是他活着的意义</p>
                        <p><a class="btn btn-lg btn-primary" href="#/" target="_blank" role="button">点我下载</a></p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="banner3.jpg" alt="3 slide">

                <div class="">
                    <div class="carousel-caption">
                        <h1>极品飞车</h1>
                        <p>来一场速度与激情的视觉盛宴</p>
                        <p><a class="btn btn-lg btn-primary" href="#" target="_blank" role="button">点我下载</a></p>
                    </div>
                </div>
            </div>

        </div>
        <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
    <div class="modal fade" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">关于</h4>
                </div>
                <div class="modal-body">
                    <p>游戏菌是模仿Steam以及其他游戏平台的页面</p>
                    <p>作者：林珈捷</p>
                    <p>学号：1705050119</p>
                    <p>班级：软件技术1班</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">点击关闭</button>

                </div>
            </div>
        </div>
        <!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
<script>
    $(function () {
        $(".gyu").click(function () {
            $("#mymodal").modal("toggle");
        });
    });
</script>

</html>